<template>
  <div>
    <van-nav-bar
      title="管理员页面"
      left-text="返回"
      right-text="首页"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
      fixed
      placeholder
    />
    <van-divider
      :style="{ color: '#fab1a0', borderColor: '#fab1a0', padding: '0 16px' }"
    >
      分类管理
    </van-divider>
    <van-collapse v-model="activeName" accordion>
      <!-- 图片转链接 -->
      <van-collapse-item title="图片转链接" name="3">
        <van-uploader :after-read="onRead" accept="image/*" />
      </van-collapse-item>

      <!-- 添加分类 -->
      <van-collapse-item title="添加分类" name="1">
        <van-form @submit="onSubmit" id="addCate" autocomplete="off">
          <van-field
            clearable
            v-model="cateName"
            name="cateName"
            label="分类名"
            placeholder="分类名称"
            :rules="[{ required: true, message: '请填写分类名称' }]"
          />
          <van-field
            autosize
            clearable
            type="textarea"
            v-model="catePicurl"
            name="catePicurl"
            label="图片"
            placeholder="图片链接"
            :rules="[{ required: true, message: '请填写图片链接' }]"
          />
          <van-cell
            class="pinksapn"
            title="输入图片链接后点击预览图片"
            closeable
            @click="addcateyuPic"
          />

          <van-field
            clearable
            v-model="cateLink"
            name="cateLink"
            label="跳转"
            placeholder="跳转页面"
            :rules="[{ required: true, message: '请填写跳转页面' }]"
          />
          <van-field
            clearable
            v-model="cateSort"
            name="cateSort"
            type="number"
            label="排序号"
            placeholder="排序号"
            :rules="[{ required: true, message: '请填写排序号' }]"
          />
          <div style="margin: 16px">
            <van-button round block type="info" native-type="submit"
              >提交</van-button
            >
          </div>
        </van-form>
      </van-collapse-item>
      <!-- 所有分类 -->
      <van-collapse-item title="所有分类" name="2">
        <van-button
          type="primary"
          @click="getCateList"
          size="small"
          id="getList"
          >点击获取分类列表(向右滑动有惊喜！)</van-button
        >
        <van-swipe-cell v-for="itme in cateLists" :key="itme.cateId">
          <div v-if="cateLi">
            <span class="cellId">ID：{{ itme.cateId }}</span>
            <span class="titel">名称：{{ itme.cateName }}</span>
            <span class="catesort">排序号：{{ itme.cateSort }}</span>
          </div>

          <template #right>
            <van-button
              square
              type="danger"
              text="删除"
              @click="deleteCate(itme.cateId)"
            />
            <van-button
              square
              type="primary"
              text="修改"
              @click="putCateList(itme.cateId)"
            />
          </template>
        </van-swipe-cell>
      </van-collapse-item>
    </van-collapse>
    <!-- 轮播图 -->
    <van-divider
      :style="{ color: '#ff7675', borderColor: '#ff7675', padding: '0 16px' }"
    >
      轮播图管理
    </van-divider>
    <van-collapse v-model="lunboPic" accordion>
      <!-- 所有轮播图 -->
      <van-collapse-item title="所有轮播图" name="1">
        <van-button type="primary" @click="getfocusList" size="small"
          >点击获取轮播图(向右滑动有惊喜！)</van-button
        >
        <van-swipe-cell v-for="itme in focusPic" :key="itme.fspId">
          <div>
            <span class="cellId">ID：{{ itme.fspId }}</span>
            <span class="titel">名称：{{ itme.fspTitle }}</span>
            <span class="ifshow"
              >显示：{{ itme.fspType == 0 ? "否" : "是" }}</span
            >
            <span class="catesort">排序号：{{ itme.fspSort }}</span>
          </div>

          <template #right>
            <van-button
              square
              type="danger"
              text="删除"
              @click="deletefousc(itme.fspId)"
            />
            <van-button
              square
              type="primary"
              text="修改"
              @click="putFoucusList(itme.fspId)"
            />
          </template>
        </van-swipe-cell>
      </van-collapse-item>
      <!-- 添加轮播图 -->

      <van-collapse-item title="添加轮播图" name="2">
        <van-form @submit="FouconSub" id="addFoucs" autocomplete="off">
          <van-field
            v-model="fspTitle"
            name="fspTitle"
            label="轮播图名"
            placeholder="轮播图名"
            :rules="[{ required: true, message: '请填写轮播图名' }]"
          />
          <van-field
            clearable
            autosize
            type="textarea"
            v-model="fspPicurl"
            name="fspPicurl"
            label="图片"
            placeholder="图片链接"
            :rules="[{ required: true, message: '请填写图片链接' }]"
          />
          <van-cell
            class="pinksapn"
            title="输入图片链接点击预览图片"
            @click="addFoucsyuPic"
          />
          <van-field
            clearable
            v-model="fspLink"
            name="fspLink"
            label="跳转"
            placeholder="跳转页面"
            :rules="[{ required: true, message: '请填写跳转页面' }]"
          />
          <van-field
            clearable
            v-model="fspSort"
            name="fspSort"
            type="number"
            label="排序号"
            placeholder="排序号"
            :rules="[{ required: true, message: '请填写排序号' }]"
          />
          <van-field name="fspType" label="是否显示">
            <template #input>
              <van-radio-group v-model="fspType" direction="horizontal">
                <van-radio name="0">否</van-radio>
                <van-radio name="1">是</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <div style="margin: 16px">
            <van-button round block type="info" native-type="submit"
              >提交</van-button
            >
          </div>
        </van-form>
      </van-collapse-item>
    </van-collapse>
    <van-divider
      :style="{ color: '#ff7675', borderColor: '#ff7675', padding: '0 16px' }"
    >
      用户管理
    </van-divider>

    <van-collapse v-model="userObj" accordion>
      <!-- 所有用户 -->
      <van-collapse-item title="所有用户" name="1">
        <van-button type="primary" @click="getuserList" size="small"
          >点击获取轮播图(向右滑动有惊喜！)</van-button
        >
        <van-swipe-cell v-for="itme in userLists" :key="itme.userId">
          <div>
            <span class="cellId">邮箱：{{ itme.email }}</span>
            <van-button
              type="primary"
              size="mini"
              @click="getopenID"
              :data-clipboard-text="itme.userId"
              class="open_id idpaiban"
              >点击复制ID</van-button
            >
            <br />
            <span class="titel">名称：{{ itme.userName }}</span>

            <van-button
              type="warning"
              size="mini"
              @click="getPassword"
              :data-clipboard-text="itme.userPwd"
              class="open_pwd pwdpaiban"
              >点击复制密码</van-button
            >
          </div>

          <template #right>
            <van-button
              square
              type="danger"
              text="删除"
              @click="deleteuser(itme.userId)"
            />
          </template>
        </van-swipe-cell>
      </van-collapse-item>
    </van-collapse>
    <!-- 商品管理 -->
    <van-divider
      :style="{ color: '#ff7675', borderColor: '#ff7675', padding: '0 16px' }"
    >
      商品管理
    </van-divider>
    <van-collapse v-model="shopfneg" accordion>
      <van-collapse-item title="所有商品" name="1">
        <van-button type="primary" @click="getAllgoods" size="small"
          >点击获取轮播图(向右滑动有惊喜！)</van-button
        >
        <van-swipe-cell v-for="item in goodslist" :key="item.goodsId">
          <span class="cellId">ID：{{ item.goodsId }}</span>
          <span class="cellId">标题：{{ item.goodsTitle }}</span>
          <span class="cellId">状态：{{ item.goodsStatus }}</span>
          <template #right>
            <van-button
              square
              type="danger"
              text="删除"
              @click="deletegoods(item.goodsId)"
            />
          </template>
        </van-swipe-cell>
      </van-collapse-item>
    </van-collapse>
    <!-- 求购管理 -->
    <van-divider
      :style="{ color: '#ff7675', borderColor: '#ff7675', padding: '0 16px' }"
    >
      求购管理
    </van-divider>
    <van-collapse v-model="needsfneg" accordion>
      <van-collapse-item title="所有求购" name="1">
        <van-button type="primary" @click="getAllneeds" size="small"
          >点击获取轮播图(向右滑动有惊喜！)</van-button
        >
        <van-swipe-cell v-for="item in needsList" :key="item.needsId">
          <span class="cellId">ID：{{ item.needsId }}</span>
          <span class="cellId">发布人：{{ item.needsXm }}</span>
          <span class="cellId">状态：{{ item.needsStatus }}</span>
          <template #right>
            <van-button
              square
              type="danger"
              text="删除"
              @click="deleteneeds(item.needsId)"
            />
          </template>
        </van-swipe-cell>
      </van-collapse-item>
    </van-collapse>
    <!-- 修改分类弹出层 -->
    <van-popup v-model="putCate" round closeable>
      <div id="putform">
        <h5>修改分类</h5>
        <van-form @submit="putSubmit" id="putCate">
          <van-field
            disabled
            v-model="putcateId"
            name="cateId"
            label="ID"
            placeholder="ID"
            :rules="[{ required: true, message: '请填写ID' }]"
          />
          <van-field
            v-model="putcateName"
            name="cateName"
            label="分类名"
            placeholder="分类名称"
            :rules="[{ required: true, message: '请填写分类名称' }]"
          />
          <van-field
            clearable
            autosize
            type="textarea"
            v-model="putcatePicurl"
            name="catePicurl"
            label="图片"
            placeholder="图片链接"
            :rules="[{ required: true, message: '请填写图片链接' }]"
          />
          <van-cell
            title="点击预览图片"
            @click="cateyulanPic"
            closeable
            is-link
          />

          <van-field
            clearable
            v-model="putcateLink"
            name="cateLink"
            label="跳转"
            placeholder="跳转页面"
            :rules="[{ required: true, message: '请填写跳转页面' }]"
          />
          <van-field
            clearable
            v-model="putcateSort"
            name="cateSort"
            type="number"
            label="排序号"
            placeholder="排序号"
            :rules="[{ required: true, message: '请填写排序号' }]"
          />
          <div style="margin: 16px">
            <van-button round block type="info" native-type="submit"
              >提交</van-button
            >
          </div>
        </van-form>
      </div>
    </van-popup>

    <!-- 轮播图弹出层 -->
    <van-popup v-model="putFoucs" round closeable>
      <div id="putform">
        <h5>修改分类</h5>
        <van-form @submit="putFoucsSub" id="putFoucs">
          <van-field
            disabled
            v-model="putfspId"
            name="fspId"
            label="ID"
            placeholder="ID"
            :rules="[{ required: true, message: '请填写ID' }]"
          />
          <van-field
            v-model="putfspTitle"
            name="fspTitle"
            label="轮播图名"
            placeholder="轮播图名"
            :rules="[{ required: true, message: '请填写轮播图名' }]"
          />
          <van-field
            clearable
            autosize
            type="textarea"
            v-model="putfspPicurl"
            name="fspPicurl"
            label="图片"
            placeholder="图片链接"
            :rules="[{ required: true, message: '请填写图片链接' }]"
          />
          <van-cell title="点击预览图片" is-link @click="foucsyulanPic" />
          <van-field
            clearable
            v-model="putfspLink"
            name="fspLink"
            label="跳转"
            placeholder="跳转页面"
            :rules="[{ required: true, message: '请填写跳转页面' }]"
          />
          <van-field
            clearable
            v-model="putfspSort"
            name="fspSort"
            type="number"
            label="排序号"
            placeholder="排序号"
            :rules="[{ required: true, message: '请填写排序号' }]"
          />
          <van-field name="fspType" label="是否显示">
            <template #input>
              <van-radio-group v-model="putfspType" direction="horizontal">
                <van-radio name="0">否</van-radio>
                <van-radio name="1">是</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <div style="margin: 16px">
            <van-button round block type="info" native-type="submit"
              >提交</van-button
            >
          </div>
        </van-form>
      </div>
    </van-popup>
  </div>
</template>

<script>
import $ from "jquery";
import Vue from "vue";
import { Toast } from "vant";
import { ImagePreview } from "vant";
import Clipboard from "clipboard";

Vue.use(Toast);
export default {
  name: "ToutiaoCate",

  components: {},

  directives: {},

  data() {
    return {
      activeName: "0",
      lunboPic: "0",
      userObj: "0",
      putCate: false,
      putFoucs: false,
      cateLi: false,

      // 添加分类的form
      cateName: "",
      catePicurl: "",
      cateLink: "",
      cateSort: "",
      cateLists: [],

      // 修改分类的form
      putcateId: "",
      putcateName: "",
      putcatePicurl: "",
      putcateLink: "",
      putcateSort: "",
      // 轮播图
      focusPic: [],
      // 修改的轮播
      putfspId: "",
      putfspTitle: "",
      putfspType: "1",
      putfspPicurl: "",
      putfspLink: "",
      putfspSort: "",
      // 添加轮播图
      fspTitle: "",
      fspPicurl: "",
      fspLink: "",
      fspSort: "",
      fspType: "1",
      // 用户操作
      userLists: [],
      shopfneg: "0",
      goodslist: [],
      needsfneg: "0",
      needsList: [],
    };
  },

  mounted() {},
  created() {},
  methods: {
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      // //console.log(file);
      // this.getPicurl(file.content);
    },
    async getAllneeds() {
      let data = {
        finish: 0,
        status: 1,
      };
      const { data: res } = await this.$http.get("/api/needs/list", {
        params: data,
      });
      ////console.log(res);
      this.needsList = res.data;
    },
    deleteneeds(id) {
      let that = this;
      $.ajax({
        type: "DELETE",
        url: "http://121.4.40.144/api/needs/" + id,
        beforeSend: function (request) {
          request.setRequestHeader("token", localStorage.getItem("token"));
        },
        success: function (res) {
          if (res.code !== 200) {
            Toast("删除失败");
          } else {
            Toast("删除成功");
            that.getAllneeds();
          }
        },
      });
    },
    // 所有商品
    async getGoodslist() {
      const { data: res } = await this.$http.get("/api/goods/list");
      //console.log(res);
      this.goodslist = res.data;
    },
    getAllgoods() {
      this.getGoodslist();
    },
    // 所有分类
    async getCateList() {
      this.cateLi = true;
      const { data: res } = await this.$http.get("/api/cate/all");
      //console.log(res);
      this.cateLists = res.data;
    },
    // 获取用户表
    async getuserList() {
      const { data: res } = await this.$http.get("/api/user/all");
      //console.log(res);
      this.userLists = res.data;
    },
    // 添加分类
    onSubmit(values) {
      let that = this;
      $.ajax({
        type: "post",
        url: "http://121.4.40.144/api/cate/",
        data: JSON.stringify(values),
        dataType: "json",
        contentType: "application/json",
        beforeSend: function (request) {
          request.setRequestHeader("token", localStorage.getItem("token"));
        },
        success: function (res) {
          if (res.code !== 200) {
            Toast("添加失败");
          } else {
            Toast("添加成功");
            $("#addCate")[0].reset();
            that.cateName = "";
            that.catePicurl = "";
            that.cateLink = "";
            that.cateSort = "";
          }
        },
      });
    },
    // 添加轮播图
    FouconSub(values) {
      let that = this;
      $.ajax({
        type: "post",
        url: "http://121.4.40.144/api/focuspic/",
        data: JSON.stringify(values),
        dataType: "json",
        contentType: "application/json",
        beforeSend: function (request) {
          request.setRequestHeader("token", localStorage.getItem("token"));
        },
        success: function (res) {
          if (res.code !== 200) {
            Toast("添加失败");
          } else {
            Toast("添加成功");
            that.fspTitle = "";
            that.fspPicurl = "";
            that.fspLink = "";
            that.fspSort = "";
            that.fspType = "1";
          }
        },
      });
    },
    addFoucsyuPic() {
      ImagePreview([this.fspPicurl]);
    },
    deletegoods(id) {
      let that = this;
      $.ajax({
        type: "DELETE",
        url: "http://121.4.40.144/api/goods/" + id,
        beforeSend: function (request) {
          request.setRequestHeader("token", localStorage.getItem("token"));
        },
        success: function (res) {
          if (res.code !== 200) {
            Toast("删除失败");
          } else {
            Toast("删除成功");
            that.getGoodslist();
          }
        },
      });
    },
    // 删除分类

    deleteCate(id) {
      //console.log(id);
      $.ajax({
        type: "DELETE",
        url: "http://121.4.40.144/api/cate/" + id,
        beforeSend: function (request) {
          request.setRequestHeader("token", localStorage.getItem("token"));
        },
        success: function (res) {
          if (res.code !== 200) {
            Toast("删除失败");
          } else {
            $("#getList").click();
            Toast("删除成功");
          }

          //console.log(res);
        },
      });
    },
    // 删除轮播图
    deletefousc(id) {
      let that = this;
      $.ajax({
        type: "DELETE",
        url: "http://121.4.40.144/api/focuspic/" + id,
        beforeSend: function (request) {
          request.setRequestHeader("token", localStorage.getItem("token"));
        },
        success: function (res) {
          if (res.code !== 200) {
            Toast("删除失败");
          } else {
            that.getfocusList();
            Toast("删除成功");
          }

          //console.log(res);
        },
      });
    },
    // 删除用户
    deleteuser(id) {
      let that = this;
      $.ajax({
        type: "DELETE",
        url: "http://121.4.40.144/api/user/" + id,
        beforeSend: function (request) {
          request.setRequestHeader("token", localStorage.getItem("token"));
        },
        success: function (res) {
          if (res.code !== 200) {
            Toast("删除失败");
          } else {
            that.getuserList();
            Toast("删除成功");
          }
          //console.log(res);
        },
      });
    },
    // 修改分类弹窗
    putCateList(id) {
      this.putCate = true;
      this.getIdCate(id);
    },
    //  修改轮播图弹窗
    putFoucusList(id) {
      this.putFoucs = true;
      this.getIdfocuspic(id);
    },
    // 根据id查看分类
    async getIdCate(id) {
      const { data: res } = await this.$http.get("/api/cate/" + id);
      this.putcateId = res.data.cateId;
      this.putcateName = res.data.cateName;
      this.putcatePicurl = res.data.catePicurl;
      this.putcateLink = res.data.cateLink;
      this.putcateSort = res.data.cateSort;
    },
    // 根据id查找轮播图
    async getIdfocuspic(id) {
      const { data: res } = await this.$http.get("/api/focuspic/" + id);
      this.putfspId = res.data.fspId;
      this.putfspTitle = res.data.fspTitle;
      this.putfspType = res.data.fspType + "";
      this.putfspPicurl = res.data.fspPicurl;
      this.putfspLink = res.data.fspLink;
      this.putfspSort = res.data.fspSort;
    },
    // 修改分类提交
    putSubmit(values) {
      let that = this;
      $.ajax({
        type: "PUT",
        url: "http://121.4.40.144/api/cate/" + that.putcateId,
        data: JSON.stringify(values),
        dataType: "json",
        contentType: "application/json",
        beforeSend: function (request) {
          request.setRequestHeader("token", localStorage.getItem("token"));
        },
        success: function (res) {
          if (res.code !== 200) {
            Toast("修改失败");
          } else {
            Toast("修改成功");
            that.putCate = false;
            that.getCateList();
          }
        },
      });
    },
    // 修改轮播图提交
    putFoucsSub(values) {
      values.putfspType = parseInt(this.putfspType);
      // //console.log(values);
      let that = this;
      $.ajax({
        type: "PUT",
        url: "http://121.4.40.144/api/focuspic/" + that.putfspId,
        data: JSON.stringify(values),
        dataType: "json",
        contentType: "application/json",
        beforeSend: function (request) {
          request.setRequestHeader("token", localStorage.getItem("token"));
        },
        success: function (res) {
          if (res.code !== 200) {
            Toast("修改失败");
          } else {
            Toast("修改成功");
            that.putFoucs = false;
            that.getfocusList();
          }
        },
      });
    },

    onClickLeft() {
      this.$router.push("/my");
    },
    onClickRight() {
      this.$router.push("/");
    },

    // 轮播图
    // 获取全部轮播图
    async getfocusList() {
      // this.cateLi = true;
      const { data: res } = await this.$http.get("/api/focuspic/all");
      //console.log(res);
      this.focusPic = res.data;
    },
    onRead() {},
    // 预览图片
    foucsyulanPic() {
      ImagePreview([this.putfspPicurl]);
    },
    cateyulanPic() {
      ImagePreview([this.putcatePicurl]);
    },
    addcateyuPic() {
      ImagePreview([this.catePicurl]);
    },
    // 复制
    getopenID() {
      var clipboard = new Clipboard(".open_id");
      clipboard.on("success", (e) => {
        Toast.success("复制ID成功");
        // 释放内存
        clipboard.destroy();
      });
      clipboard.on("error", (e) => {
        // 不支持复制
        Toast.fail("复制ID错误");
        // 释放内存
        clipboard.destroy();
      });
    },
    getPassword() {
      var clipboard = new Clipboard(".open_pwd");
      clipboard.on("success", (e) => {
        Toast.success("复制密码成功");
        // 释放内存
        clipboard.destroy();
      });
      clipboard.on("error", (e) => {
        // 不支持复制
        Toast.fail("复制密码错误");
        // 释放内存
        clipboard.destroy();
      });
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.van-collapse-item {
  .van-collapse-item__title,
  .pinksapn {
    span {
      background-color: pink;
      padding: 5px 10px;
      border-radius: 8px;
      color: #fff;
      margin-left: 20px;
    }
  }
}
.van-swipe-cell span {
  display: inline-block;
  padding: 10px 5px;
}
.catesort {
  position: absolute;
  right: 0px;
}
.idpaiban {
  position: absolute;
  right: 10px;
}
.pwdpaiban {
  position: absolute;
  right: 10px;
}
.cellId {
  margin-right: 10px;
}
#putform {
  padding: 20px 10px;
  /deep/.van-field__value {
    width: 150px;
  }
}
.van-swipe-cell {
  border: 1px solid #fdcb6e;
  margin: 10px 0px;
}
</style>